<!-- 账号，密码/验证等 -->
<template>
	<!-- #Login-main -->
	<div>
		<el-form
		:model="loginInfo"  
		status-icon  
		:rules="rules"  
		ref="loginInfo" 
		class="demo-ruleForm"
		style="zoom:1.3"
		>
			<el-form-item prop="uAccount">
				<el-input 
				:class="isshake" 
				type="text"
				@focus="pageScorll" 
				v-model="loginInfo.uAccount"  
				autocomplete="off"  
				placeholder="账号"
				@keyup.native.enter="focusNext('pass')"
				></el-input>
			</el-form-item>
			<el-form-item prop="uPassword">
				<el-input 
				ref="pass"
				:class="isshake"  
				type="password" 
				@focus="pageScorll" 
				v-model="loginInfo.uPassword"  
				autocomplete="off" 
				placeholder="密码"
				show-password
				></el-input>
			</el-form-item>
			<el-form-item id="Login-submit">
					<img
					:src="require('../../assets/login.png')" 
					type="primary" 
					@click="submitForm(loginInfo)">
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
import { Toast,Dialog } from 'vant'
export default{
	name:'LoginMain',
	data(){
		const LoginPage = document.getElementById("LoginPage")
		const VName = (rule,value,callback)=>{
			if(value === "")
				callback(new Error('请输入用户名'))
			else if(!/^\d{6,13}$|^123$|^keke$/.test(value))
				callback(new Error('用户名不符合规范'));
			callback();
			this.pageReduction();
		};
		const VPass = (rule,value,callback)=>{
			if(value === "")
				callback(new Error('请输入密码'))
			else if(!/^.{6,13}$|^123$/.test(value))
				callback(new Error('密码不符合规范'));
			callback();
			this.pageReduction();
		};
		return{
			isshake:'',
			loginInfo:{
				uAccount:"",
				uPassword:"",
			},
			rules:{
				uAccount:[
					{validator:VName,trigger:'blur'}
				],
				uPassword:[
					{validator:VPass,trigger:'blur'}
				],
				
			},
		}
	},
	created() {
		let uAccount = window.localStorage.getItem('src_login_account')
		if(uAccount)
			this.loginInfo.uAccount = uAccount
	},
	methods:{
		submitForm(data){
			this.$refs['loginInfo'].validate(isOk => {
				if(!isOk)//校验失败
				{
					// alert("error")
					// return;
					this.isshake = "shakeThe"
					setTimeout(()=>{
						this.isshake = ""
					},300)
					// animation: shakeThe 0.1S 3;
				}
				else//校验成功
				{
					Toast.loading({
					  message: '登陆中...',
					  forbidClick: true,
					  duration:0,
					});
					axios.post('./api/doLog', {
						data:this.loginInfo
						})
            // loginApi({data:this.loginInfo})
						.then(a=>{//成功到后端
						// console.log(a)
							setTimeout(()=>{
								if(a.data.isOk)//后端校验成功
								{
									//记住账号
									window.localStorage.setItem('src_login_account',a.data.user.uAccount)
									// console.log(a.data.user)
									Dialog.confirm({
										title: '自动登录',
										message: '是否记住您的密码？下次将自动登录。',
										// allowHtml: true
										cancelButtonText: '不用了',
									})
									.then(() => {
										window.localStorage.setItem('src_login',JSON.stringify(a.data))
									})
									this.$store.commit("getLoginInfo",a.data)
									this.$router.push('/home');
								}
								Toast({
									message:a.data.data,
									duration:200,
									icon:a.data.isOk? "success":"cross",
								});
							},500)
						})
						.catch(a=>{
							console.log(a)
							Toast({message:"服务器异常",duration:1000,icon:"cross",});
						})
				}
				});
			},
			pageScorll(){
				this.$emit("pageScorll")
			},
			pageReduction(){
				this.$emit("pageReduction")
			},
			focusNext(nextRef) {
			    this.$refs[nextRef].focus()
			}
		},
}
</script>

<style lang="scss">
	#Login-main{
		width: 80%;
		display: flex;
		flex-flow: column wrap;
		.el-form-item__content{
			margin-left: 0 !important;
		}
		.el-input__inner{
			background-color: #ede9e9bd;
			border-radius: 23px;
			height: 45px;
		}
		#Login-submit{
			zoom: 0.8;
			transform: translate(-2.5px,20px);
			text-align: center;
		}
		#Login-submit:active{
			opacity: 0.5;
		}
		.shakeThe{
			animation: shakeThe 0.1S 3;
		}
		@keyframes shakeThe{
			25%{
				transform: translate(2px,0px);
			}
			75%{
				transform: translate(-2px,0px);
			}
			100%{
				transform: translate(0px,0px);
			}
		}
		
	}
	
	
</style>
